<template>
  <comcard>
    <div slot="title_name">
     
     <el-row>
      <el-form :inline=true>
          
          <el-form-item label="订单号">
              <el-input type="text" placeholder="订单号" v-model="fromObj.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="收货人">
              <el-input type="text" placeholder="收货人" v-model="fromObj.consignee"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
              <el-input type="text" placeholder="手机号" v-model="fromObj.phone"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
              <el-input type="text" placeholder="订单状态" v-model="fromObj.orderState"></el-input>
          </el-form-item>
           <el-form-item label="选择时间">
             <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="query()">查询</el-button>
          </el-form-item>

      </el-form>

     </el-row>

    </div>
    <div slot="body_name">


      <template>
        <el-table :data="dataSoce" border style="width: 100%">
      
          <el-table-column prop="orderNo" label="订单号" width="120">
          </el-table-column>

           
          <el-table-column prop="orderTime" label="下单时间" width="180">
              <template slot-scope="{row}">{{row.orderTime | timeMF}}</template>
          </el-table-column>
          

          <el-table-column prop="phone" label="手机号" width="120">
          </el-table-column>
          <el-table-column  prop="consignee" label="收货人" width="120">
          </el-table-column>
          <el-table-column  prop="deliverAddress" label="配送地址" width="120">
          </el-table-column>
            <el-table-column  prop="deliveryTime" label="送达时间" width="180">
                <template slot-scope="{row}">{{row.deliveryTime | timeMF}}</template>
          </el-table-column>
            <el-table-column  prop="remarks" label="用户备注" width="120">
          </el-table-column>
            <el-table-column  prop="orderAmount" label="订单金额" width="120">
          </el-table-column>
           <el-table-column  prop="orderState" label="订单状态" width="120">
          </el-table-column>
           
          <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
              <el-button type="text"size="small" @click="gosrc('/order/detail',scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="gosrc('/order/updata',scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>


  <el-row>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="fromObj.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="fromObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>

      </template>
    </div></comcard>
    </div>
  </comcard>
</template>

<script>
import comcard from "../../components/comcard/index.vue";
import { api_query } from "../../api/order.js";
export default {
  components: {
    comcard,
  },
  mounted() {
    this.query();
  },

  data() {
    return {
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      total: 0,
      tableData: [],
      dataSoce: [],

      fromObj: {
        currentPage: 1,
        pageSize: 5,
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: "",
      },
    };
  },
  methods: {
    //渲染
    async query() {
      let rst = await api_query(this.fromObj);
      console.log(rst);
      let { data, total } = rst;
      this.dataSoce = data;
      this.total = total;
    },

    //分页
    handleSizeChange(val) {
      this.fromObj.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.fromObj.currentPage = val;
      this.query();
    },

    gosrc(path, id) {
      this.$router.push({
        path,
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>